<template>
  <view :class="theme">
    <view class="relative mt-30">
      <uv-image width="100%" height="266" src="/static/img/banner-service.png" />
      <view class="absolute justify-between" style="top: 30rpx; right: 50rpx; bottom: 30rpx; left: 50rpx;">
        <view>
          <text class="fs-36 fw-700 color-base">竭诚为您服务</text>
          <text class="mt-20 color-base">致力于解决APP使用过程中遇到的问题</text>
        </view>
        <button @click="uniNavigator({ url: info.url })" hover-class="tap-hover"
          class="m-0 lh-60 bg-main color-inverse text-28 fw-bold b-rounded-30 w-230">联系客服</button>
      </view>
    </view>
    <view class="ml-50 mr-50">
      <label class="lh-[5] text-28 fw-bold">官方Q群：</label>
      <view>
        <view @click="copyText(item.number)" v-for="(item, index) in info.group" :key="index"
          class="flex-row bg-primary mb-30 b-rounded-12 items-center justify-center p-30">
          <text class="mr-24 text-32 fw-500">{{ item.name }}: {{ item.number }}</text>
          <uv-icon size="36" name="/static/img/icon-copy.svg" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const { theme } = useMapState(["theme"]);
const info = ref<AnyObject>({});

onLoad(() => {
  uni.request({
    url: "/getCustomer",
    success({ data }: any) {
      info.value = data;
    }
  })
});

const copyText = (data: string) => {
  uni.setClipboardData({
    data: data,
    showToast: true
  });
}

</script>

<style lang="scss" scoped>
// scss
</style>